<template>
  <div>
	  <van-sticky :offset-top="1">
	  	<header id="header" class="aui-bar aui-bar-nav">
	  		<a class="aui-pull-left" @click="fnStateList">
	  			<span class="iconfont icon-fanhui"></span>
	  		</a>
	  		<div class="aui-title">已添加</div>
			<a class="aui-pull-right" @click="fnState">
			    <span>添加买号</span>
			</a>
	  	</header>
	  </van-sticky>
    <div class="list aui-bg-f van-hairline--bottom">
        <div class="aui-padded-10" v-for="(item, index) in account.items" :key="index" v-cloak>
            <van-row>
                <van-col span="24">
                    <div class="name aui-padded-b-5">
                        <span class="aui-ftn14 aui-text-7" v-text="item.username"></span>
                        <span class="aui-ftn12 aui-text-red aui-padded-l-10">[{{item.status}}]</span>
                    </div>
                </van-col>
            </van-row>
            <div class=" aui-ftn12 aui-text-red aui-padded-b-5" v-if="item.reason" v-cloak>
                备注: {{item.reason}}
            </div>
            <van-row>
                <van-col span="10">
                    <div class="aui-text-7 aui-ftn14">[{{item.typename}}]</div>
                </van-col>
                <van-col span="14">
                    <div class="btn_group">
                        <div class="btn aui-ftn12 aui-text-center" @click="fnDeleteUser(item.id)">
                            删除
                        </div>
                        <div class="btn aui-ftn12 aui-text-center" @click="fnCheckDetail(item.id)">
                            查看
                        </div>
                        <div class="btn aui-ftn12 aui-text-center aui-margin-r-0" @click="fnCheckUser(item.id, item.type)">
                            修改
                        </div>
                    </div>
                </van-col>
            </van-row>
        </div>
    </div>

    <div class="tags aui-bg-f aui-margin-t-10 aui-padded-15">
        <div class="aui-padded-b-15 aui-ftn12">
            <span class="aui-text-red">修改买号：</span>
            <span class="aui-text-7">登录名不能修改，其它信息可以修改</span>
        </div>
        <div class="aui-padded-b-15 aui-ftn12">
            <span class="aui-text-red">最多绑定：</span>
            <span class="aui-text-7">每个平台限绑定 </span><span class="aui-ftn14 aui-text-red">5个</span>
            <span class="aui-text-7"> 买号</span>
        </div>
        <div class="aui-padded-b-15 aui-ftn12">
            <span class="aui-text-red">删除买号：</span>
            <span class="aui-text-7">没有参加试用活动的买号可以删除</span>
        </div>
    </div>
  </div>
</template>

<script>
  import User from '../../../service/user.js'
  export default {
    data() {
      return {
        account: {
           items: [],
        },
        user: {},
        _level_img: '',
        select_city: '惠州'
      }
    },
    mounted() {
		this.initData()
    },
    methods: {
        initData: function() {
          User.fnGetAccountList({uid: this.$store.state.uid, isToken: true}).then(res => {
            if (res && res.status) {
              this.account.items = res.data;
            }

          })
        },
        // 删除买号
        fnDeleteUser: function(id) {
          this.$dialog.confirm({
            title: '标题',
            message: '确定删除该买号?',
          })
          .then(() => {
            // on confirm
            User.fnDelUser({uid: this.$store.state.uid, isToken: true, id: id}).then(res => {
              if (res) {
                this.utils.fnMsg(res.msg);
                if (res.status) {
                    this.initData()
                }
              }
            })
          })
          .catch(() => {
              // on cancel
          });
        },
        fnCheckDetail: function(id) {
          this.utils.fnOpenCommon(this, {name:'check_user', params: {id: id}})
        },
        fnCheckUser: function(id, type) {
          this.utils.fnOpenCommon(this, {name:'edit_user', query: {title: '修改买号'}, params: {id: id}})
        },
		fnStateList () {
			this.utils.fnOpenCommon(this, {name: 'my'})
		},
		fnState () {
			this.utils.fnOpenCommon(this, {name: 'add_user'})
		}
    }
  }
</script>

<style lang="scss" scoped>
  .van-overlay {
    z-index: 99!important;
  }
  div.list {
    border-bottom: 1px solid #eee;
  }
  div.list div.passed {
      color: #bcbcbc;
  }
  div.list div.btn_group {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
  }
  div.list div.btn {
      display: inline-block;
      width: 60px;
      height: 22px;
      line-height: 22px;
      border-radius: 4px;
      border: 1px solid #FF9664;
      color: #FF9664;
      margin-right: 10px;
  }
  div.list div.btn_grou div.btn:last-child {
      margin-right: 0;
  }
  </style>
